<!--  -->
<template>
  <div class>
    <section class="app-main">
      <section class="container-main-header">
        <section class="header-left">
          <i class="el-icon-menu"></i>
          <h3>首页</h3>
          <span class="solidus">/</span>
          <h3>营销</h3>
          <span class="solidus">/</span>
          <span>秒杀活动列表</span>
        </section>
        <section class="header-right">
          <i class="el-icon-pear" @click="leaveHandle"></i>
        </section>
      </section>
      <div class="miaosha-box">
        <div class="search-Box">
          <div class="search-box">
            <div>
              <i class="el-icon-search"></i>&nbsp;&nbsp;
              <span>筛选搜索 (秒杀)</span>
              <!-- <el-input placeholder="请输入内容"   v-model="queryAll"> -->
              <el-button type="primary" style="float: right;" @click="inquiresear()">查询搜索</el-button>
              <el-button style="float: right;margin-right:15px;" @click="resetsear">重置</el-button>
            </div>
            <div class="miaosha-input">
              <span>活动名称：</span>
              <el-input placeholder="请输入内容" v-model="inputVal" clearable style="width:200px"></el-input>
            </div>
          </div>
        </div>
        <div class="datalist" style="margin-top:20px;">
          <div class="datalist-box">
            <i class="el-icon-document"></i>&nbsp;&nbsp;
            <span>数据列表</span>
            <el-button class="addactivity" style="float: right; " size="mini" @click="addAct">添加活动</el-button>
            <el-button
              class="addactivity"
              style="float: right; margin-right:20px;"
              size="mini"
              @click="miaoshaList"
            >秒杀时间段列表</el-button>
          </div>
        </div>
        <div class="table-container">
          <div class="datalist-content">
            <table class="tablee" cellspacing="0" cellpadding="0">
              <tr class="hang">
                <td style="width:60px" class="confirm-box">
                  <input type="checkbox" class="confirm" />
                </td>
                <td style="width:100px">编号</td>
                <td style="width:360px">活动标题</td>
                <td style="width:120px">活动状态</td>
                <td style="width:120px">开始时间</td>
                <td style="width:120px">添加时间</td>
                <td style="width:240px">上线/下线</td>
                <td style="width:180px; border-right: 1px solid #ececec;">操作</td>
              </tr>
              <!-- 遍历数据 -->
              <tr class="hanglist" v-for="(item,index) in datalist2" :key="item.id">
                <td style="width:60px">
                  <input type="checkbox" class="confirm" />
                </td>
                <td style="width:100px">{{item.id}}</td>
                <td style="width:360px">{{item.Acttag}}</td>
                <td style="width:120px">{{item.Status}}</td>
                <td style="width:120px">{{item.StarTime}}</td>
                <td style="width:120px">{{item.AsOf}}</td>
                <td style="width:240px">
                  <el-switch v-model="item.kaiguan"></el-switch>
                </td>
                <td style="width:180px; border-right: 1px solid #ececec;" class="operation">
                  <el-button type="text" @click="setShops(index)">设置商品</el-button>
                  <el-button type="text" @click="editsuu">编辑</el-button>
                  <el-button type="text" @click="delShops(index)">删除</el-button>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.pageNum"
          :page-sizes="[5, 10, 15,]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="datalist.length"
          style="float:right;margin-top:20px;"
        ></el-pagination>
      </div>

      <!-- 编辑弹出选项框 -->
      <el-dialog title="添加活动" :visible.sync="edits">
        <el-form :model="form">
          <el-form-item label="活动名称：" label-width="120px">
            <el-input v-model="form.name" autocomplete="off" style="width:220px"></el-input>
          </el-form-item>
        </el-form>
        <div class="block" style="margin:20px 0 0 38px;">
          <span class="demonstration" style="margin-right:12px;">开始时间：</span>
          <el-date-picker
            v-model="actTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            label-width="320px"
          ></el-date-picker>
        </div>
        <el-form :model="form">
          <el-form-item label="上线/下线：" label-width="120px">
            <el-radio-group v-model="form.resource">
              <el-radio :label="1">上线</el-radio>
              <el-radio :label="0">下线</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="edits = false">取 消</el-button>
          <el-button type="primary" @click="addNewlist">确 定</el-button>
        </div>
      </el-dialog>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  keyword: null,
};
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      inputVal: "",
      // kaiguan: true,
      listQuery: Object.assign({}, defaultListQuery),
      currentPage: 1,
      pageSize: 5,
      value: "",
      datalist: [
        {
          id: 1,
          Acttag: "春季家电家具疯狂秒杀1",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 2,
          Acttag: "春季家电狂秒杀2",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: true,
        },
        {
          id: 3,
          Acttag: "秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 4,
          Acttag: "秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 5,
          Acttag: "春季家电家具疯狂秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 6,
          Acttag: "春季家电家具疯狂秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
      ],
      datalist2: [
        {
          id: 1,
          Acttag: "春季家电家具疯狂秒杀1",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 2,
          Acttag: "疯狂秒杀2",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 3,
          Acttag: "春季家电家具疯狂秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 4,
          Acttag: "疯狂秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
        {
          id: 5,
          Acttag: "春季家电家具疯狂秒杀3",
          Status: "活动未开始",
          StarTime: "2018-12-11",
          AsOf: "2019-1-1",
          kaiguan: false,
        },
      ],
      edits: false,
      form: {
        name: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      addList: {
        Acttag: "",
        Status: "",
        StarTime: "",
        AsOf: "",
        kaiguan: true,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      actTime: "",
      // formLabelWidth: "120px",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  created() {},
  methods: {
    leaveHandle() {
      var n = confirm("是否退出登录");
      if (n == true) {
        window.sessionStorage.clear();
        location.reload();
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.datalist2 = this.datalist.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.datalist2 = this.datalist.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    setShops: function (index) {
      console.log("这里是设置商品", index);
      this.$router.push({ path: "/selectSession" });
    },
    editsuu: function (index) {
      console.log("这里是编辑", index);
      this.edits = true;
    },
    delShops: function (index) {
      console.log("这里是删除", index);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.datalist2.splice(index, 1);
          console.log(this.$root);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查询搜索
    inquiresear: function (index) {
      console.log("这是查询搜索");
      console.log(this.inputVal);
      console.log(this.datalist);
    },
    //重置
    resetsear: function () {
      console.log("这里是重置");
      this.inputVal = "";
    },
    // 添加活动
    addAct: function () {
      console.log("这里是添加活动");
      this.edits = true;
    },
    miaoshaList: function () {
      console.log("这里是秒杀时间段列表");
      this.$router.push({ path: "/flashSession" });
    },
    //添加新表单列表
    addNewlist: function () {
      (this.edits = true),
        this.$axios.post("/addDatalist", {
          id: "",
          Acttag: this.addList.Acttag,
          Status: this.addList.Status,
          StarTime: this.addList.StarTime,
          AsOf: this.addList.AsOf,
          kaiguan: this.addListkaiguan,
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.app-main {
  min-height: 100%;
}
.miaosha-box {
  padding: 20px;
}
.container-main-header {
  padding: 0 20px;
  align-items: center;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-left h3 {
  font-size: 14px;
}
.solidus {
  margin: 0 5px;
}
.el-icon-menu {
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
}
.el-icon-pear {
  font-size: 24px;
  cursor: pointer;
}
.app-main .miaosha-box .search-Box,
.datalist {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
}
.app-main .miaosha-box .search-Box .search-box,
.datalist-box {
  padding: 20px;
}
.app-main .miaosha-box .miaosha-input {
  /* width: 380px; */
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 30px;
}
.app-main .miaosha-box .miaosha-input span {
  /* width: 130px; */
  margin-left: 60px;
  font-size: 16px;
}
.addactivity span {
  width: 82px;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
}
.datalist-content {
  /* width: 1127px; */
  min-height: 48px;
  margin-top: 20px;
}
.hang {
  height: 48px;
}

.tablee > tr > td {
  border: 1px solid #ececec;
  text-align: center;
  line-height: 48px;
  border-right: none;
}
.table-container .tablee .confirm {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 14px;
  /* outline: none;
    border: none; */
}
.operation {
  font-size: 13px;
}
.operation > button {
  border: none;
  outline: none;
  margin: 0 5px;
  background: #fff;
  color: #66b1ff;
}
</style>